import React, { useState } from 'react'
import "./indexGoods.css"
import { reqShopAdd } from "../../../request/api";

function Indexgoods(props) {
    let { indexGoods } = props

    const [flagGoods, setFlagGoods] = useState(0)

    const arr = indexGoods[flagGoods] ? indexGoods[flagGoods].content : []

    let addShop=(id)=>{
        reqShopAdd({uid:JSON.parse(sessionStorage.getItem("user")).uid,type:1,goodsid:id,num:1}).then(res=>{
            if(res.data.code===200){
                console.log("购物车添加成功");
            }
        })
    }

    return (
        <div className="indexGoods">
            <div className="button">
                <button onClick={() => setFlagGoods(0)}>限时秒杀</button>
                <button onClick={() => setFlagGoods(1)}>畅销商品</button>
                <button onClick={() => setFlagGoods(2)}>品质大牌</button>
                <button onClick={() => setFlagGoods(3)}>小优自营</button>
            </div>
            {
                arr ? arr.map(item => (
                    <div className="goods" key={item.id}>
                        <div><img src={item.img} alt="" /></div>
                        <div className="goodsBox">
                            <p className="goodsname">{item.goodsname}</p>
                            <p>
                                <span className="price">现价￥{item.price}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span className="market_price">原价￥{item.market_price}</span>
                            </p>
                            <p className="shop" onClick={()=>addShop(item.id)} >加入购物车</p>
                            <p className="description">{item.description}</p>
                        </div>
                    </div>
                )) : null
            }
        </div>
    )
}

export default React.memo(Indexgoods)